<template>
  <view>
    <view class="cu-timeline" v-for="(item, index) in news" :key="index">
      <view class="cu-time text-pink" style="color: #39b54a">{{ item.day }}</view>
      <view class="cu-item" @tap="showModal" data-target="Modal" :data-id="index">
        <view class="content">
          <text>{{ item.title }}</text>
        </view>
      </view>
    </view>
    <view class="cu-modal" :class="modalName == 'Modal' ? 'show' : ''">
      <view class="cu-dialog">
        <view class="cu-bar bg-white justify-end">
          <view class="content">{{ newso.title }}</view>
          <view class="action" @tap="hideModal">
            <text class="cuIcon-close text-red"></text>
          </view>
        </view>
        <view class="padding-xs">
          <view class="margin-sm text-left" v-html="newso.content == '' ? '无内容' : newso.content"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      news: [],
      modalName: null,
      newso: []
    };
  },
  onLoad() {
    this.getArticle();
    uni.setNavigationBarTitle({
      title: '公告'
    });
  },
  methods: {
    getArticle() {
      var that = this;
      uni.request({
        url: that.app.apiHost + '/gonggao',
        method: 'POST',
        header: { Authorization: '' },
        success: (data) => {
          let datas = data.data.data;
          that.news = datas;
          console.log(datas);
        },
        fail(a) {
          uni.showToast({
            title: '链接失败',
            icon: 'error'
          });
        }
      });
    },
    showModal(e) {
      this.modalName = e.currentTarget.dataset.target;
      let id = e.currentTarget.dataset.id;
      this.newso = this.news[id];
    },
    hideModal(e) {
      this.modalName = null;
    }
  }
};
</script>

<style>
.cu-timeline > .cu-item:not([class*='cuIcon-'])::before {
  color: #39b54a;
}
.cu-timeline > .cu-item::after {
  background-color: #39b54a;
}
</style>
